<template>
  <div ref="box" class="header">
    <div class="title">
      <div class="icon">
        <CodeSandboxOutlined />
      </div>
      <div class="name">Earthquake early warning and evaluation system</div>
    </div>
    <div class="tools">
      <div class="tool_item" @click="toMin">
        <MinusOutlined />
      </div>
      <div class="tool_item" @click="toBig">
        <template v-if="!isMax">
          <BorderOutlined />
        </template>
        <template v-else>
          <ExpandOutlined />
        </template>
      </div>
      <div class="tool_item" @click="toClose">
        <CloseOutlined />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  MinusOutlined,
  BorderOutlined,
  CloseOutlined,
  CodeSandboxOutlined,
  ExpandOutlined
} from '@ant-design/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  paramsUrl: {
    type: String,
    default: ''
  }
})
let resizeObserver
const isMax = ref(false)
const box = ref()
const checkBoxWidth = (): void => {
  if (box.value) {
    const boxWidth = box.value.clientWidth
    const screenWidth = window.screen.width

    if (boxWidth === screenWidth) {
      isMax.value = true
    } else {
      isMax.value = false
    }
  }
}

const startObserving = (): void => {
  if (box.value) {
    resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.target === box.value) {
          checkBoxWidth()
        }
      }
    })
    resizeObserver.observe(box.value)

    // 初始检查宽度
    checkBoxWidth()
  }
}

const stopObserving = (): void => {
  if (resizeObserver) {
    resizeObserver.disconnect()
  }
}

onMounted(() => {
  startObserving()
  window.addEventListener('resize', checkBoxWidth)
})

onUnmounted(() => {
  stopObserving()
  window.removeEventListener('resize', checkBoxWidth)
})

const toMin = (): void => {
  window.renderAPI.minWin(props.paramsUrl)
}
const toBig = (): void => {
  window.renderAPI.scaleWin(props.paramsUrl)
}
const toClose = (): void => {
  window.renderAPI.closeWin(props.paramsUrl)
}
</script>

<style lang="scss" scoped>
.header {
  -webkit-app-region: drag;
  background-color: #f0f4f9;
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    display: flex;
    align-items: center;
    .icon {
      padding: 0 10px;
      color: burlywood;
    }
    .name {
      font-size: 12px;
    }
  }
  .tools {
    display: flex;

    .tool_item {
      -webkit-app-region: no-drag;
      width: 40px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      &:hover {
        background-color: #ccc;
      }
      &:last-child:hover {
        background: #e81123;
      }
    }
  }
}
</style>
